<!-- 关键词设置 —— 选择默认词头 -->
<template>
  <ele-modal
    width="700px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="选择默认词头"
    @update:visible="updateVisible"
  >
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-bottom: 15px">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox style="min-width: 100px;margin-bottom: 15px" v-for="city in list" :label="city" :key="city.id">{{city.content}}</el-checkbox>
    </el-checkbox-group>
    <div class="btn-class flex">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" @click="confirm()">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  export default {
    name: "prend",
    props: {
      list: Array,
      oldList: String
    },
    data() {
      return {
        // 弹窗是否打开
        visible:false,
        newArray:[],
        checkAll: false,
        checkedCities: [],
        // 总
        cities: this.list,
        // 是否全选
        isIndeterminate: false
      };
    },
    methods: {
      async show(){
        this.visible=true
        this.checkedCities= [];
        this.checkedCities= this.oldList.split`,`;
      },
      // 弹出框 visible
      updateVisible(value) {
        this.visible=value
      },
      // ‘复选框’ 全选
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.list : [];
        this.isIndeterminate = false;
        console.log("this.checkedCities", this.checkedCities)
      },
      // 单个 ‘复选框’ 选择
      handleCheckedCitiesChange(value) {
        this.checkedCities = value
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        // 选择的vue>0
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        console.log("this.checkedCount", checkedCount, 'this.cities.length', this.cities.length,'value',value )
      },
      //取消
      cancel(){
        this.updateVisible(false)
      },
      //确定
      confirm(){
        if(this.oldList){
          var array = this.oldList.split`,`;
          console.log("array",array)
          this.newArray = this.checkedCities.filter((item) => !array.some((item2) => item2 === item.content))
          console.log('去除重复后的数组',this.newArray)
        }
        else{
          this.newArray = this.checkedCities
        }
        let checkedAll = this.getTextByJs(this.newArray)
        this.$emit('checkedAll', checkedAll ,this.checkedCities,this.list)
        // this.$emit('checkedAll', checkedAll)
        this.cancel()
      },
      //用js
      getTextByJs(arr) {
        console.log('进入关联', arr)
        var str = "";
        for (var i = 0; i < arr.length; i++) {
          str += arr[i].content+ ",";
        }
        //去掉最后一个逗号(如果不需要去掉，就不用写)
        /*if (str.length > 0) {
          str = str.substr(0, str.length - 1);
        }*/
        return str;
      }
    }
  };
</script>

<style scoped lang="less">
  .btn-class{
    margin:100px 0 20px
  }
</style>
